<template>
   <div  class="container">
      <el-form
           :model="cardForm"
           :label-width="100"
           status-icon
           style="width: 70%;padding-left: 10%;"
         >
            <el-form-item label="会员" >
                 <el-select v-model="cardForm.memberId"
                       placeholder="-请输入名字或手机号码搜索-"
                       filterable
                       remote
                       reserve-keyword
                       :remote-method="remoteMethod"
                       :loading="loading"
                       >
                           <template #header>
                               <el-row >
                                   <el-col :span="3"><h3>id</h3></el-col>
                                   <el-col :span="7"><h3>会员名称</h3></el-col>
                                   <el-col :span="7"><h3>性别</h3></el-col>
                                   <el-col :span="7"><h3>手机号</h3></el-col>
                               </el-row>
                           </template>
                          <el-option
                           v-for="item in remoteMemberData"
                           :key="item.id"
                           :label="item.customerName"
                           :value="item.id"
                           >
                           <el-row>
                               <el-col :span="3"><span>{{ item.id }}</span></el-col>
                               <el-col :span="7"><span>{{ item.customerName }}</span></el-col>
                               <el-col :span="7"><span >{{ item.gender }}</span></el-col>
                               <el-col :span="7"><span >{{ item.phone }}</span></el-col>
                           </el-row>
                         
                           </el-option>

                            <template #loading>
                               <svg class="circular" viewBox="0 0 50 50">
                                   <circle class="path" cx="25" cy="25" r="20" fill="none" />
                               </svg>
                           </template>
                         </el-select>
            </el-form-item>


         <!-- 会员卡选择 -->
         <el-form-item label="会员卡选择">
            <el-select v-model="cardForm.cardId"
                      placeholder="-请选择绑定的会员卡-"
                      size="large"
                      style="width: 100%">
               <template #header>
                  <el-row>
                     <el-col :span="3"><h3>卡名称</h3></el-col>
                     <el-col :span="7"><h3>金额</h3></el-col>
                     <el-col :span="7"><h3>有效期</h3></el-col>
                  </el-row>
               </template>
               <el-option
                 v-for="item in cardList"
                 :key="item.id"
                 :label="item.name"
                 :value="item.id">
                 <el-row>
                    <el-col :span="3"><span>{{ item.name }}</span></el-col>
                    <el-col :span="7"><span>{{ item.totalCount }}</span></el-col>
                    <el-col :span="7"><span>{{ item.totalDay }}</span></el-col>
                 </el-row>
               </el-option>
               <template #loading>
                  <svg class="circular" viewBox="0 0 50 50">
                     <circle class="path" cx="25" cy="25" r="20" fill="none" />
                  </svg>
               </template>
            </el-select>
         </el-form-item>


             <el-form-item label="充值次数" >
                 <el-input-number
                   v-model="cardForm.validCount"
                   :min="1"
                   controls-position="right"
                   class="w50"
               />
             </el-form-item>
             <el-form-item label="有效期" >
               <el-input-number
                       v-model="cardForm.validDay"
                       :min="1"
                       controls-position="right"
                       class="w50"
                   />
             </el-form-item>
             <el-form-item label="实收金额"  >
                <el-input  placeholder="金额" class="w50" v-model="cardForm.receivedMoney">
                     <template #prepend>
                       <span>￥</span>
                   </template>
                   <template #append>
                       <span>元</span>
                   </template>
                </el-input>
               </el-form-item>
                <el-form-item label="选择支付方式"  v-model="cardForm.payMode">
                     <el-select
                           v-model="cardForm.payMode"
                           placeholder="-请选择支付方式-"
                           size="large"
                           style="width: 100%"
                           >
                           <el-option
                               v-for="item in selectList.payModeList"
                               :key="item.value"
                               :label="item.label"
                               :value="item.value"
                           />
                           </el-select>
              </el-form-item>
              <el-form-item label="备注" >
                <el-input v-model="cardForm.note" type="textarea"  />
             </el-form-item>
               <el-form-item>
                   <el-button type="danger"  @click="bindConfirm">确认</el-button>
                    <el-button type="success" @click="cancelForm">取消</el-button>
               </el-form-item>
       </el-form>


   </div>
</template>

<script setup>
import {ref,reactive} from 'vue'
import { queryMemberInfo, getMemberInfo, getCardInfo, bindMember} from '@/api/member'


//绑定会员卡的数据
const cardForm = reactive({
   memberId:null,//会员id
   cardId: null,
   validCount: 50,
   validDay: 30,
   receivedMoney: '',
   payMode: [],
   note: ''
})

const selectList = reactive({
   payModeList: [
      {
         value: '1',
         label: '支付宝',
      },
      {
         value: '2',
         label: '微信',
      },
      {
         value: '3',
         label: '现金',
      },
      {
         value: '4',
         label: '银行卡',
      },
   ],
})

const bindConfirm = () => {
   //调用bindMember方法
   console.log('=========绑定会员卡========')
   console.log(cardForm)
   bindMember(cardForm).then((res) => {
      if (res.code === 20000) {
         ElMessage.success('绑定成功')
         //关闭抽屉
         addEditDrawer.value = false
         //刷新表格
         getMemberCardList()
      }
   })
   console.log('===绑定会员卡确认=')
 
}

//取消按钮
const cancelForm = () => {
  
}
//会员查询
const loading = ref(false)
const remoteMemberData = ref([])
const cardList = ref([]);  // 会员卡列表

const remoteMethod = (query) => {
   loading.value = true;
   console.log('查询内容:', query); // 打印 query 以检查输入内容
   if (!query) {
      // 如果没有查询条件，调用 getMemberInfo 获取所有会员信息
      getMemberInfo().then(res => {
         console.log('所有会员数据：', res);
         remoteMemberData.value = res.data.data;
         console.log('remoteMemberData：', remoteMemberData.value);
         loading.value = false;
      }).catch(error => {
         console.error('获取所有会员数据失败：', error);
         loading.value = false;
      });
   } else {
      // 如果有查询条件，调用 queryMemberInfo 进行查询
      queryMemberInfo(query).then(res => {
         console.log('查询结果数据：', res);
         remoteMemberData.value = res.data.data;
         console.log('remoteMemberData：', remoteMemberData.value);
         loading.value = false;
      }).catch(error => {
         console.error('查询会员数据失败：', error);
         loading.value = false;
      });
   }

};

// 获取会员卡信息
const fetchCardInfo = () => {
    getCardInfo().then(res => {
        console.log('会员卡数据：', res);
        cardList.value = res.data.data;
    }).catch(error => {
        console.error('获取会员卡信息失败：', error);
    });
};
// // 计算实付金额
// const calculateAmount = () => {
//    // 假设选择的会员卡在 cardList 中有金额信息
//    const selectedCard = cardList.value.find(card => card.value === cardForm.cardId);
//    cardForm.receivedMoney = selectedCard ? selectedCard.amount : '';
// };

// 在组件加载时获取会员卡信息
fetchCardInfo();
</script >
<style lang="less" scoped>
.w50{
   width: 45%;
}
.circular {
  display: inline;
  height: 30px;
  width: 30px;
  animation: loading-rotate 2s linear infinite;
}
.path {
  animation: loading-dash 1.5s ease-in-out infinite;
  stroke-dasharray: 90, 150;
  stroke-dashoffset: 0;
  stroke-width: 2;
  stroke: var(--el-color-primary);
  stroke-linecap: round;
}
</style>